<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressDeliveryManagementLang.orderbill_details')"
      :visible.sync="Visible"
      width="100%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Order_information')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.customer')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.username"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.line')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.line_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Delivery_location')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.start_local_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.destination')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.target_local_name"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Delivery_method')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.dispatch_type_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div v-if="this.data.dispatch_type==1||this.data.dispatch_type==2" class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.contacts')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.contact_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div v-if="this.data.dispatch_type==1||this.data.dispatch_type==2" class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.contact_information')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.contact_tel"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div v-if="data.dispatch_type==1" class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Pick_address')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.contact_addr"
                ></el-input>
              </div>
          </div>
          </div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.IsBrand')}}:
              </div>
              <div class="contant">
                <el-select
                  disabled
                  v-model="data.is_brand"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_IsBrand"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.payment_method')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.pay_type_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.currency')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.currency_type_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
            </div>
          </div>
          <div class="dialogBoxItem" style="padding:0">
            <div class="dialogBoxItemRow" style="padding: 10px 0;" v-for="(el,k) in itemsArrAddress" :key="k">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{el.name_current}}:
              </div>
              <div class="contant">
                <el-input
                  v-if="el.type===1"
                  disabled
                  v-model="el.val"
                ></el-input>
                <el-date-picker
                  v-if="el.type===2"
                  disabled
                  v-model="el.val"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="datetime"
                  :placeholder="$t('common.select_plactholder')"
                >
                </el-date-picker>
                <el-input-number
                  v-if="el.type===3"
                  controls-position="right"
                  size="small" 
                  disabled
                  :min="0"  
                  :precision="Number(el.scale)"
                  v-model="el.val">
                </el-input-number>
                <el-input
                  v-if="el.type===4||el.type===6"
                  disabled
                  v-model="el.val"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.take_goods_method')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.take_goods_method')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.pickup_type_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.name_sender')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.pickup_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.Sender_phone_number')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.pickup_tel"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div v-if="data.pickup_type==2" class="RequiredRowTip">*</div>
                {{$t('ExpressOrderManagementLang.return_address')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.pickup_addr"
                ></el-input>
              </div>
          </div>
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Product_information')}}</div>
          <div class="dialogBoxItem" style="padding:0">
            <div class="dialogBoxItemRow" style="padding: 10px 0;" v-for="(el,k) in itemsArrCommodity" :key="k">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{el.name_current}}:
              </div>
              <div class="contant">
                <el-input
                  v-if="el.type===1"
                  disabled
                  v-model="el.val"
                ></el-input>
                <el-date-picker
                  v-if="el.type===2"
                  disabled
                  v-model="el.val"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="datetime"
                  :placeholder="$t('common.select_plactholder')"
                >
                </el-date-picker>
                <el-input-number
                  v-if="el.type===3"
                  controls-position="right"
                  size="small" 
                  disabled
                  :min="0"  
                  :precision="Number(el.scale)"
                  v-model="el.val">
                </el-input-number>
                <el-input
                  v-if="el.type===4||el.type===6"
                  disabled
                  v-model="el.val"
                ></el-input>
              </div>
            </div>
          </div>
          <MyTable
          :tableColumn="tableColumn_goods"
          :tableData="tableData_goods"
          :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
        <div v-if="is_insure" class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Insurance_Information')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.buy_insurance')}}:
              </div>
              <div class="contant">
                <el-switch
                  disabled
                  v-model="data.is_insure"
                  :active-value="0"
                  :inactive-value="1"
                  active-color="#26BD00"
                  >
                </el-switch>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Insured_price')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  :min="premium_min" 
                  :precision="2"
                  :max="premium_max"
                  v-model="data.insure_price">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.Guarantee_rate')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  :min="0"  
                  :precision="2"
                  v-model="data.premium_rate">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressOrderManagementLang.insurance_premium')}}:
              </div>
              <div class="contant">
                <el-input-number
                  disabled
                  controls-position="right"
                  size="small" 
                  :min="0"  
                  v-model="data.insure_costs">
                </el-input-number>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Order_remarks')}}</div>
          <div class="dialogBoxItem">
            <div style="width:100%;" class="dialogBoxItemRow">
              <div class="contant">
                <el-input
                  disabled
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.remark"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      order_sn:'',
      lid:'',
      data:{},
      options_IsBrand:[],
      is_insure:false,//是否可以买保险
      premium_min:0,//保险费最小值
      premium_max:0,//保险费最大值
      itemsArrAddress:[],//额外输入项-收货地址
      itemsArrCommodity:[],//额外输入项-商品信息
      tableColumn_goods: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Product_Name'),
          prop: "goods_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.commodity_value'),
          prop: "goods_price",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Quantity_goods'),
          prop: "goods_num",
          width: 120,
        },
        
      ],
      tableData_goods: [],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(data) {
      this.order_sn=data.order_sn
      this.lid=data.lid
      this.getOptions()
      this.Visible = true;
      this.getData();
    },
    //获取下拉单数据
    getOptions(){
      this.$get("lineSysItems").then((res) => {
        this.options_IsBrand = res.data.is_brand;
      });
    },
     //获取单条
    getData() {
      this.$get("shippingOrderInfo", { order_sn: this.order_sn,lid: this.lid }).then((res) => {
        this.data = res.data;
        this.is_insure=res.data.is_insure==0
        this.premium_min=Number(res.data.line_info.premium_min)
        this.premium_max=Number(res.data.line_info.premium_max)
        this.tableData_goods=res.data.goods
        this.itemsArrAddress=res.data.line_info.items.filter(el=>{return el.position===1})
        this.itemsArrCommodity=res.data.line_info.items.filter(el=>{return el.position===2})
        res.data.items.forEach(item=>{
          let index=this.itemsArrAddress.findIndex(el=>{return el.id == item.id})
          if(index>-1){
            this.itemsArrAddress[index].val=item.val
          }
          let index1=this.itemsArrCommodity.findIndex(el=>{return el.id == item.id})
          if(index1>-1){
            this.itemsArrCommodity[index1].val=item.val
          }
        })
      });
    },
    //取消修改
    cancel() {
      this.data={}
      this.tableData_goods=[],
      this.Visible = false;
    },

  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem {
    flex-wrap: wrap;
    gap: 1%;
    justify-content: flex-start;
    .dialogBoxItemRow {
      width: 24%;
    }
  }
</style>